<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/zc.css">
    <link rel="stylesheet" href="../font_3sqfkdkt64s/iconfont.css">
    <link rel="stylesheet" href="../font_cnubd6mcu1/iconfont.css">
</head>

<body>
    <header></header>
    <div class="big-box">
        <div class="box">
            <div class="small_box">
                <div class="small_inner clearfix">
                    <a href="javascript:;" data-type="mobile" data-name="手机号码" class="active" onclick="toggleRegType(this);">手机注册</a>
                    <a href="javascript:;" data-type="email" data-name="邮箱地址" onclick="toggleRegType(this);" class="">邮箱注册</a>
                </div>
            </div>

            <div class="box-bot">
                <h5 style="font-weight: bold;font-size: 14px;width: 358px;height: 40px;">请输入手机号码注册:</h5>

                <div class="inputbg">
                    <form action="input-1">
                        <!-- <label class="" for="user">  -->
                        <input type="text" name="username" id="username" autocomplete="off" placeholder="手机号码">
                        <span id="showUser"></span><br/>
                        <!-- </label> -->
                    </form>
                </div>
                <div class="inputbg">
                    <form action="input-1">
                        <!-- <label class="input-1" for="user">  -->
                        <input type="text" name="username" id="userpass" autocomplete="off" placeholder="输入密码">
                        <!-- </label> -->

                        <!-- <img id="captcha-img" alt="图片验证码" src="/api.php?s=antacom/passport/code.html&amp;w=120&amp;h=36" title="看不清换一张" class="chkcode_img icode_image code-image"> -->
                        <span id="showPass"></span><br/>
                    </form>
                </div>
                <!-- //我已充分了解 -->
                <div>
                    <div class="input-2">
                        <input type="checkbox" name="agree" id="user-3">我已充分阅读、理解并接受个人信息保护政策的全部内容
                    </div>
                </div>
                <!-- /确认 -->
                <div>
                    <input class="input-3" type="submit" id="btnReg" value="注册"></div>
            </div>
            <div id="messageBox">

            </div>
        </div>
    </div>

    <footer></footer>

</body>


</html>
<script src="../jQuery.js"></script>
<script>
    $("header").load("head.html");
    $("footer").load("footer.html");
</script>
<script>
    function isTest() {
        return isUserName() && isPass();
    }

    //1、用户名的前端验证
    function isUserName() {
        //1)、非空判断
        if ($("#username").val() == "") {
            return false;
        }
        //2)、格式判断
        // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
        let reg = /^[a-zA-Z_]\w{1,9}$/;
        if (!reg.test($("#username").val())) {
            return false;
        }
        return true;
    }


    //2、密码的前端验证
    function isPass() {
        //1)、非空判断
        if ($("#userpass").val() == "") {
            return false;
        }
        //2)、格式判断
        // 数字，6-16位
        let reg = /^\d{6,16}$/;
        if (!reg.test($("#userpass").val())) {
            return false;
        }
        return true;
    }

    //二、后端验证
    let hasUser = false; //该用户名不存在
    function hasUserBack() {
        //后端验证用户名是否存在
        $.get("../goodsAndShoppingCart/checkUser.php", {
            "username": $("#username").val()
        }, function(data) {
            data = data.trim();
            if (data == "0") {
                $("#showUser").html("亲，该用户名已经存在，请重新思考！");
                $("#showUser").css({
                    "color": "red"
                });
                hasUser = true;
            } else {
                $("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
                $("#showUser").css({
                    "color": "green"
                });
                hasUser = false;
            }
        })
    }

    $(function() {
        $("#username").blur(function() {
            //1、前端验证
            if (isUserName() == false) {
                $("#showUser").html("亲，用户名的格式不正确！");
                return;
            }
            //2、后端的验证
            hasUserBack();
        });

        $("#userpass").blur(function() {
            //1、前端验证
            if (isPass() == false) {
                $("#showPass").html("亲，密码格式不正确	！");
                return;
            } else {
                $("#showPass").html("√");
            }
        });

        $("#btnReg").click(function() {
            //1、前端验证
            if (isTest() == false) {
                $("#messageBox").html("亲，您的信息输入不全");
                return;
            }
            //2、用户名是否存在(后端验证)
            if (hasUser) {
                return;
            }

            $.post(
                "../goodsAndShoppingCart/addUser.php", {
                    "username": $("#username").val(),
                    "userpass": $("#userpass").val()
                },
                function(data) {
                    data = data.trim();
                    if (data == "success") {
                        $("#messageBox").css({
                            "color": "green"
                        });
                        $("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
                        setTimeout(() => {
                            location.href = "dl.html"
                        }, 2000);
                    } else if (data == "fail") {
                        $("#messageBox").css({
                            "color": "red"
                        });
                        $("#messageBox").html("不好意思，注册失败!");
                    } else {
                        $("#messageBox").css({
                            "color": "red"
                        });
                        $("#messageBox").html("不好意思，服务器出问题了!");
                    }
                }
            );
        });
    });
</script>